<template>
    <div>
        <input v-model="userinfo.username" placeholder="Username">
        <input v-model="userinfo.password" type="password" placeholder="Password">
        <input v-model="userinfo.phone" placeholder="Phone">
        <button @click="register">Register</button>
        <button @click="login">Login</button>
    </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  data() {
    return {
      userinfo: {
        username: '',
        password: '',
        phone: ''
      } 
    }
  },
  methods: {
   async register() {
          try {
              const response = await axios.post('http://localhost:3000/api/register', this.userinfo);
              alert(response.data.message);
          } catch (error) {
              alert(error.response?.data?.error || 'Registration failed');
          }
    },
   async login() {
        try {
            const response = await axios.post('http://localhost:3000/api/login', {
                username: this.username,
                password: this.password
            });
            alert(`Welcome ${response.data.user.username}!`);
        } catch (error) {
            alert(error.response?.data?.error || 'Login failed');
        }
    }  
  }
}
</script>

<style>

</style>